<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			<van-cell-group inset>
				<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
				<!-- 默认图标展示在左侧且无法通过插槽定义 -->
				<van-cell icon="shop-o">
					<!-- 使用 title 插槽来自定义标题 -->
					<template #title>
						<span class="custom-title">单元格66</span>
						<van-tag type="primary">标签</van-tag>
					</template>
					<!-- 使用 right-icon 插槽来自定义右侧图标 -->
					<template #right-icon>
						<van-icon name="search" class="search-icon" />
					</template>
				</van-cell>
				<van-cell title="单元格" value="内容" label="描述信息" />
			</van-cell-group>
			<!-- 按键 -->
			<van-button round url="" @click="handleClick" color="linear-gradient(to right, #ff6034, #ee0a24)"
				type="danger">遮罩层</van-button>
			<!-- 图标 -->
			<van-icon size="40" badge="99+" name="cart-o" color="#1989fa" />
			<van-button @click="handleShowToast">轻提示</van-button>
			<van-popup round v-model:show="show" closeable close-icon-position="top-left" position="bottom"
				:style="{ height: '30%' }" />

		</view>
	</view>
</template>

<script>
	import {
		showToast
	} from 'vant';
	export default {
		data() {
			return {
				title: 'Hello',
				show: false
			}
		},
		onLoad() {

		},
		methods: {
			handleClick() {
				this.title = "Test"
				this.show = true
			},
			handleShowToast() {
				const toast = showToast({
					forbidClick: true,
					message: '倒计时 3 秒',
					icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
				});
				const duration = 3000; // 倒计时 5 秒
				const startTime = Date.now();
				const endTime = startTime + duration;
				// 比定时器更精准计时
				function countdown() {
					const currentTime = Date.now();
					const remainingTime = Math.max(0, endTime - currentTime);

					if (remainingTime > 0) {
						requestAnimationFrame(countdown);
						toast.message = `倒计时 ${parseInt((remainingTime/1000)+1)} 秒`;
					} else {
						toast.close();
					}
				}
				countdown()
			}
		}
	}
</script>

<style>
	.content {
		/* display: flex; */
		text-align: center;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		/* display: flex; */
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>